<template>
  <div class="box">
    <h1>
        文字视差效果
    </h1>
  </div>
</template>

<script setup lang='ts'>
</script>

<style lang='scss' scoped>
.box{
    background-color: #fff;
    padding: 50vh 0;
    text-align: center;
    font-size: 2.5rem;
}
h1{
    background: linear-gradient(to bottom, red 50%, transparent 50%) center center / 100vw 100vh fixed;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-stroke: 2px red;
}
</style>